<template>
 <div>
    <ul>
      <li v-for="item in newsList" :key="item.id">
        <!-- 跳转路由并携带params参数，to的字符串写法 -->
        <!-- <router-link :to="`/home/news/newsdetail/${item.id}/${item.title}`">{{item.title}}</router-link> -->
        <!-- 跳转路由并携带params参数，to的对象写法（参数不支持path，只能写name） -->
        <!-- <router-link :to="{
          path: '/home/news/newsdetail',
          params: {id: item.id, title: item.title}
        }">
          {{item.title}}
        </router-link> -->
        <router-link :to="{
          name: 'xinwenxiangqing',
          params: {id: item.id, title: item.title}
        }">
          {{item.title}}
        </router-link>
        <button @click="pushShow(item)">push查看</button>
        <button @click="replaceShow(item)">replace查看</button>
      </li>
    </ul>
    <router-view></router-view>
 </div>
</template>

<script>
export default {
  name: 'News',
  data() {
   return {
     newsList: [
       {id: '001', title: '新闻001'},
       {id: '002', title: '新闻002'},
       {id: '003', title: '新闻003'}
     ]
   }
  },
  methods: {
    pushShow(item) {
      console.log(this.$router)
      this.$router.push({
        name: 'xinwenxiangqing',
        params: {id: item.id, title: item.title}
      })
    },
    replaceShow(item) {
       this.$router.replace({
        name: 'xinwenxiangqing',
        params: {id: item.id, title: item.title}
      })
    }
  },
  beforeDestroy() {
    console.log('News组件即将被销毁了')
  }
}
</script>
